<template>
	<div class="header-wrap">
		<div class="title">{{$store.state.terminfo.terminfo.termName}}</div>
		<div class="timeBox">
			<span class="header-clock-left">{{ date | dateYearFormat }}</span>
			<span class="header-clock-right">{{ date | dateHourMSFormat }}</span>
			<div class="terminalinfo">{{this.$store.state.terminfo.terminfo.termId}}</div>
		</div>
	</div>
</template>
<script>
	// import LogoUrl from '@/asslogo.png'
	// import LogoUrl from "@images/logo.png"
	export default {	
		name: "Header",
		data: function() {
			return {
				LogoUrl: this.$store.state.terminfo.hospLogo,
				sceneid: this.$store.state.terminfo.seceninfo.sceneid,
				date: new Date()
			};
		},
		props: {
			title: String,
			subTitle: String
		},
		methods: {
			clockRun() {
				// 显示当前日期时间
				this.timer = setInterval(() => {
					this.date = new Date();
				}, 1000);
			},
		},
		mounted() {
			// 显示当前日期时间
			this.clockRun();
		},

	};
</script>
<style scoped>
	.title {
		font-size: 25px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #435C7A;
	}

	.header-title {
		display: inline-block;
		line-height: 60px;
		font-weight: bold;
		letter-spacing: 4px;
		font-size: 25px;
		width: 400px;
		text-align: center;
		color: #fff;
		position: relative;
		vertical-align: top;
	}

	.timeBox {
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #435C7A;
		font-size: 20px;
		text-align: right;
	}

	.flex {}

	.header-clock-left {
		margin-right: 3rem;
	}

	.header-clock-right {
	}

	.terminalinfo {
		text-align: right;
		color: #435C7A;
		font-family: Source Han Sans CN;
		font-weight: 400;
	}


</style>
